<template>
	<default-header-page-layout ref="page" title="临时入库" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<step1 v-show="step===1" ref="step1" />
				<step2 v-show="step===2" ref="step2" />
			</view>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<template v-if="step===1">
					<view class="btn-frame"><u-button text="组 盘" @click="onBind"></u-button></view>
					<view class="divider"></view>
					<view class="btn-frame"><u-button type="primary" text="下一步" @click="onGoNext"></u-button></view>
				</template>
				<template v-if="step===2">
					<view class="btn-frame"><u-button text="上一步" @click="onGoPrev"></u-button></view>
					<view class="divider"></view>
					<view class="btn-frame"><u-button type="primary" text="入 库" @click="onSubmit"></u-button></view>
				</template>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import Step1 from './modules/Step1.vue'
import Step2 from './modules/Step2.vue'
import { $successInfo } from '@/static/js/utils/index.js'
let initInterVal = null;
export default {
	name:'temporaryInstorePage',
	components:{DefaultHeaderPageLayout,ActionUserRow,Step1,Step2},
	data(){
		return {
			pageBodyHeight:0,
			step:1
		}
	},
	watch:{
		step(newVal, oldVal){
			if (newVal !== oldVal) {
			  if (newVal) {
			    this.switchPage();
			  }
			}
		}
	},
	methods:{
		onGoNext(){
			this.step++
		},
		onGoPrev(){
			this.step--
		},
		onBind(){
			this.dealBind((f)=>{
				if (f) {
					$successInfo('组盘成功')
				}
			})
		},
		onSubmit(){
			this.dealConfirm((f)=>{
				if (f) {
					$successInfo('入库成功')
					this.$refs.step1.clearFullContainer()
					this.step = 1
				}
			})
		},
		/* 组盘接口调用 */
		dealBind(callback){
			let params = this.getSubmitParams('bind')
			this.$api.post('QuickBindEntrance',params,{block:'quickIn'}).then(()=>{
				callback && callback(true)
			}).catch((e)=>{
				callback && callback(false,e)
			})
		},
		/* 提交接口调用 */
		dealConfirm(callback){
			let params = this.getSubmitParams()
			this.$api.post('QuickAutoWare',params,{block:'quickIn'}).then(()=>{
				callback && callback(true)
			}).catch((e)=>{
				callback && callback(false,e)
			})
		},
		getSubmitParams(type='confirm'){
			let res = this.$refs.step1.get()
			if (type==='confirm') {
				res = {...res,...this.$refs.step2.get()}
			}
			return res
		},
		switchPage(){
			this.$nextTick(()=>{
				switch (this.step){
					case 2:
						this.$refs.step2.show()
						break;
					default:
						break;
				}
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
			this.switchPage()
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 20rpx;
	background-color: #fff;
	.btn-frame{
		width: 1%;
		box-sizing: border-box;
		flex-grow: 1;
	}
	.divider{
		width: 20rpx;
		flex-shrink: 0;
	}
}
</style>